<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>[01]网页架子鼓</title>
    <link rel="stylesheet" href="../assets/style/common.css">
    <style>
        html{
            font-size: 10px;
        }
        body{
            background: url('../assets/image/01bg.jpg') bottom center;
            background-size: cover;
        }
        
        .key{
            border: .4rem solid #000;
            border-radius: .5rem;
            margin-left: 50px;
            padding: 10px 0px;
            width: 10rem;
            text-align: center;
            background: rgba(0,0,0,0.4);
            text-shadow: 0 0 .5rem black;
            transition: all .07s ease
        }
        .key:first-child{
            margin-left: 0px;
        }
        .key kbd{
            display: block;
            color: #fff;
            font-size: 4rem;
            text-transform: uppercase;
            margin-bottom: 4px;
        }
        .sound{
            color: #ffc600;
            text-transform:uppercase;
            letter-spacing: .2rem;
        }
        .active{
            border-color: #ffc600;
            transform: scale(1.3);
            box-shadow: 0 0 .7rem #ffc600;
        }
        .button{
            position: fixed;
            bottom: 70px;
            right:30px;
            color:#ffc600;
            font-size: 1.8rem;
            border: .4rem solid #000;
            width: 6rem;
            height: 6rem;
            line-height: 5.5rem;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
            background: rgba(0,0,0,0.4);
            transition: all .07s ease
        }
        .play{
            bottom: 70px;
        }
        .record{
            bottom:140px;
            color:#e74c3c;
        }
    </style>
</head>
<body>
    <div class="w-100 h-100 d-flex ai-center jc-center">
        <div data-key="a" class="key">
            <kbd>a</kbd>
            <span class="sound">clap</span>
        </div>
        <div data-key="s" class="key">
            <kbd>s</kbd>
            <span class="sound">HIHAT</span>
        </div>
        <div data-key="d" class="key">
            <kbd>d</kbd>
            <span class="sound">KICK</span>
        </div>
        <div data-key="f" class="key">
            <kbd>f</kbd>
            <span class="sound">OPENHAT</span>
        </div>
        <div data-key="g" class="key">
            <kbd>g</kbd>
            <span class="sound">BOOM</span>
        </div>
        <div data-key="h" class="key">
            <kbd>h</kbd>
            <span class="sound">RIDE</span>
        </div>
        <div data-key="j" class="key">
            <kbd>j</kbd>
            <span class="sound">SNARE</span>
        </div>
        <div data-key="k" class="key">
            <kbd>k</kbd>
            <span class="sound">TOM</span>
        </div>
        <div data-key="l" class="key">
            <kbd>l</kbd>
            <span class="sound">TINK</span>
        </div>
    </div>
    <div class="button play">Play</div>
    <div class="button record">Rec</div>
    <!-- <div class="button out">Play</div> -->
    <audio data-key="a" src="./sounds/clap.wav"></audio>
    <audio data-key="s" src="sounds/hihat.wav"></audio>
    <audio data-key="d" src="sounds/kick.wav"></audio>
    <audio data-key="f" src="sounds/openhat.wav"></audio>
    <audio data-key="g" src="sounds/boom.wav"></audio>
    <audio data-key="h" src="sounds/ride.wav"></audio>
    <audio data-key="j" src="sounds/snare.wav"></audio>
    <audio data-key="k" src="sounds/tom.wav"></audio>
    <audio data-key="l" src="sounds/tink.wav"></audio>


    <script>
        initKey()
        function autoPlay(e){
            let play = e.target || e
            play.classList.add('active')
            // 自定义节拍
            let keys = null
            if(window.musicKeys){
                keys = window.musicKeys
            }else{
                return alert("请先录制")
            }
            keys.reduce(((baseTime,value)=>{
                let time = baseTime + value.time
                setTimeout(()=>{
                    pressKey(value)
                },time)
                return time
            }),0)
            
        }
        function initKey(){
            addEvents('.key','transitionend',removeActive)
            addEvents('html','keydown',pressKey)
            // document.addEventListener('keydown',pressKey)
            addEvents('.button','transitionend',removeActive)
            addEvents('.play','click',autoPlay)
            addEvents('.record','click',recordMusic)
        }

        function addEvents(selectorName,eventType,fnc){
            let doms = document.querySelectorAll(selectorName)
            doms.forEach(e=>{
                e.addEventListener(eventType,fnc)
            }) 
        }
        // 移除activeKey
        function removeActive(e){
            if(e.propertyName !== 'transform') return
            return e.target.classList.remove('active')
        }
        // 新增按键事件
        function pressKey(e){
            let keyValue = e.key.toLowerCase()
            let key = document.querySelector(`.key[data-key=${keyValue}]`)
            let audio = document.querySelector(`audio[data-key=${keyValue}]`)
            if(!key) return
            key.classList.add('active')
            audio.currentTime = 0
            audio.play()
            // 记录器
            if(window.baseTime && window.musicKeys){
                let now = Date.now()
                window.musicKeys.push({
                    key:keyValue,
                    time:now - window.baseTime
                })
                window.baseTime = now
            }
        }
        // 记录播放
        function recordMusic(e){
            let button = e.target
            button.classList.add('active')
            if(button.innerText === 'Rec'){
                startRecord(button)
            }else{
                stopRecord(button)
            }
            
        }

        function startRecord(button){
            button.innerText = "Stop"
            // 开始记录
            window.baseTime = Date.now()
            window.musicKeys = []
        }
        function stopRecord(button){
            button.innerText = "Rec"
            // 停止记录
            window.baseTime = null
            autoPlay(document.querySelector('.play'))
        }
    </script>
</body>
</html>